<template>
  <div class="map-table">
    <div class="map-box">
      <map-chart class="map-chart" :list="list" width="450px" height="500px"/>
    </div>
    <div class="table-box">
      <branch-issues-table :list="list"
                           @highlight="highlightRegion"
                           @cancel-highlight="cancelHighlightRegion"
                           max-height="500px"/>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import MapChart from '../components/map/MapChart.vue'
import BranchIssuesTable from '../components/table/BranchIssuesTable.vue'
import { RankedBranch } from '@/api-scp/types'
import { getBranchIssues } from '@/api-scp/dashboard'

@Component({
  name: 'MapWithTable',
  components: {
    MapChart,
    BranchIssuesTable
  }
})
export default class extends Vue {
  private list: RankedBranch[] = []
  private listLoading = true

  created() {
    this.getList()
  }

  private async getList() {
    this.listLoading = true
    this.list = await getBranchIssues()
    // TODO: group by region
    this.listLoading = false
  }

  private highlightRegion(region: string) {
    this.$emit('highlight', region)
  }

  private cancelHighlightRegion(region: string) {
    this.$emit('cancel-highlight', region)
  }
}
</script>

<style lang="scss" scoped>

.map-table {
  border: 1px solid rgb(240, 242, 245);
  display: flex;
  width: 700px;

  .map-box {
    //display: inline-block;
    min-width: 450px;
    flex-grow: 1;
    margin-top: -2px;
    margin-bottom: -2px;
    border-right: 1px solid rgb(240, 242, 245);

    .map-chart {
      width: 100%;
    }
  }

  .table-box {
    //display: inline-block;
    width: 240px;
  }

}

</style>
